<script>
import { h, ref, onMounted } from "vue";

const counter = ref(0); // 根据传入的参数，返回一个具有value的对象{value: 0}
export default {
  name: "dna-button",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      name: '123'
    }
  },
  setup (props, context) {
    // setup执行的时机是和beforeCreate是一致的，不能访问this， 只能访问props
    console.log(props, context, 'setup...');
    return {
      counter
    }
    // onMounted onMounted接收一个callback，当触发这个钩子函数的时候执行这个callback
  },
  render() {
    console.log(this.$options);
      //  $slots会返回一个存放插槽信息的对象，对象的属性名就是定义的插槽名，属性的值是一个渲染函数，执行这个函数能够得到一个vnode
      // 通过this.$slots可以获取组件内容定义的插槽
    return h(
      "div", {
        class: ["dna-button"],
        disabled: this.disabled,
    }, {
        footer: () => h('div', this.$slots.default)
    });
  },
};
</script>